        <!DOCTYPE html>
        <html lang="zh-CN">

        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport"
                  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
            <title>乐谱生成器</title>

            <link rel="stylesheet" href="css/reset.css">
            <link rel="stylesheet" href="css/musical.css">

        </head>

        <body>
        <div class="container">
            <div style="position: fixed;
            top: 20px;
            z-index: 1111;
            margin: auto;
            right: 20px;"><a href="explanation.html#musical">使用指南</a></div>
            <header class="header">
                <h2 class="title">乐谱生成器</h2>
            </header>

            <div class="main">
                <div class="notes">
                    <!-- data-note储存音符 data-numbers储存简谱 -->
                </div>
            </div>

            <footer class="footer">
                <div class="keys">
                    <div class="key-group note-key-group">
                        <!-- 音符按钮 -->
                        <div class="key note-key" data-key="key-whole">
                            <div class="key-desc">
                                <p>♩---</p>
                                <p>全音符</p>
                            </div>
                        </div>
                        <div class="key note-key" data-key="key-2">
                            <div class="key-desc">
                                <p>♩-</p>
                                <p>二分音符</p>
                            </div>
                        </div>
                        <div class="key note-key" data-key="key-4">
                            <div class="key-desc">
                                <p>♩四分</p>
                                <p>音符</p>
                            </div>
                        </div>
                        <!-- 低1~5 -->
                        <div class="key piano-key" data-key="1">
                            <!-- <div class="key-desc single-line key-tips">Q</div> -->
                            <div class="key-rhombus-circle key-rotate-animation rotate-original"></div>
                            <div class="key-title key-bass">1</div>
                        </div>
                        <div class="key piano-key" data-key="2">
                            <div class="key-title key-bass">2</div>
                            <div class="key-rhombus key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="3">
                            <div class="key-title key-bass">3</div>
                            <div class="key-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="4">
                            <div class="key-title key-bass">4</div>
                            <div class="key-rhombus key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="5">
                            <div class="key-title key-bass">5</div>
                            <div class="key-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <!-- 操作按钮 -->
                        <div class="key operation-key" data-key="key-add">
                            <div class="key-desc single-line">增加</div>
                        </div>
                        <div class="key operation-key" data-key="key-del">
                            <div class="key-desc single-line">删除</div>
                        </div>
                    </div>

                    <div class="key-group piano-key-group">
                        <!-- 音符按钮 -->
                        <div class="key note-key" data-key="key-8">
                            <div class="key-desc">
                                <p>♪八分</p>
                                <p>&nbsp;音符&nbsp;</p>
                            </div>
                        </div>
                        <div class="key note-key" data-key="key-16">
                            <div class="key-desc">
                                <p>♬十六</p>
                                <p>分音符</p>
                            </div>
                        </div>
                        <div class="key note-key" data-key="key-32">
                            <div class="key-desc">
                                <p>三十二</p>
                                <p>分音符</p>
                            </div>
                        </div>
                        <!-- 低6、7，中1~3 -->
                        <div class="key piano-key" data-key="6">
                            <div class="key-title key-bass">6</div>
                            <div class="key-rhombus key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="7">
                            <div class="key-title key-bass">7</div>
                            <div class="key-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="11">
                            <div class="key-desc single-line key-alto">1</div>
                            <div class="key-rhombus-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="12">
                            <div class="key-desc single-line key-alto">2</div>
                            <div class="key-rhombus key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="13">
                            <div class="key-desc single-line key-alto">3</div>
                            <div class="key-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <!-- 操作按钮 -->
                        <div class="key operation-key" data-key="key-pre">
                            <div class="key-desc single-line">上一个</div>
                        </div>
                        <div class="key operation-key" data-key="key-next">
                            <div class="key-desc single-line">下一个</div>
                        </div>
                    </div>

                    <div class="key-group operation-key-group">
                        <!-- 音符按钮 -->
                        <div class="key note-key" data-key="key-dot">
                            <div class="key-desc">
                                <p>&nbsp;附点&nbsp;</p>
                                <p>&nbsp;音符&nbsp;</p>
                            </div>
                        </div>
                        <div class="key note-key" data-key="key-triplet">
                            <div class="key-desc single-line">三连音</div>
                        </div>
                        <div class="key note-key" data-key="key-0">
                            <div class="key-desc single-line">休止符</div>
                        </div>
                        <!-- 中4~7，高1 -->
                        <div class="key piano-key" data-key="14">
                            <div class="key-desc single-line key-alto">4</div>
                            <div class="key-rhombus key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="15">
                            <div class="key-desc single-line key-alto">5</div>
                            <div class="key-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="16">
                            <div class="key-desc single-line key-alto">6</div>
                            <div class="key-rhombus key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="17">
                            <div class="key-desc single-line key-alto">7</div>
                            <div class="key-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <div class="key piano-key" data-key="21">
                            <div class="key-title key-high">1</div>
                            <div class="key-rhombus-circle key-rotate-animation rotate-original"></div>
                        </div>
                        <!-- 操作按钮 -->
                        <div class="key operation-key" data-key="key-finish">
                            <div class="key-desc single-line">完成</div>
                        </div>
                        <div class="key operation-key" data-key="key-play">
                            <div class="key-desc single-line">播放</div>
                        </div>
                    </div>
                </div>
            </footer>

            <textarea name="textarea" class="note-textarea" id="text"></textarea>
        </div>

        <script src="js/jquery.js"></script>
        <script src="js/musical.js"></script>
        </body>

        </html>